<template>

  <div class="cards">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>部门调转</span>
        </div>
      </template>
      <div class="first">
        <div class="information">
          <el-form label-width="200px">
            <el-form-item label="员工姓名:">
              {{ username }}
            </el-form-item>
            <el-form-item label="当前部门:">
              {{ deptName }}
            </el-form-item>
            <el-form-item label="新部门:" >
              <el-select v-model="updateEmpDeptForm.deptId" placeholder="Please select dept">
                <el-option v-for="dept in DeptList" :key="dept.deptId" :label="dept.deptName" :value="dept.deptId" />              
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button @click="submitForm1()" type="primary">
                调转
              </el-button>
              
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-card>
    <el-card>
      <template #header>
        <div class="card-header">
          <span>职位调转</span>
        </div>
      </template>
      <div class="first">
        <div class="information">
          <el-form label-width="200px">
            <el-form-item label="员工姓名:">
              {{ username }}
            </el-form-item>
            <el-form-item label="当前职位:">
              {{ deptName }}
            </el-form-item>
            <el-form-item label="新职位:" >
              <el-select v-model="updateEmpPosForm.posId" placeholder="Please select pos">
                <el-option v-for="pos in positionList" :key="pos.posId" :label="pos.posName" :value="pos.posId" />              
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button @click="submitForm2()" type="primary">
                调转
              </el-button>
              
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-card>

    

  </div>

</template>
<script setup lang="ts">
import { getDeptListInfo } from '@/api/dept';
import { ref } from 'vue';
import { useRoute } from 'vue-router';
import type { DeptList, Pos, updateDept, updateEmpDept, updateEmpPos } from '@/model'
import { updateEmpDeptId,updateEmpPosId } from '@/api/staff';
import { getPosition } from '@/api/pos';
import { tr } from 'element-plus/es/locales.mjs';

const route = useRoute()
const eId = parseInt(route.query.empId as string)
const username = route.query.username
const deptName = route.query.deptName
const DeptList = ref<DeptList[]>([])
const updateEmpDeptForm=ref<updateEmpDept>({
  empId:eId,
  deptId:1
})
const updateEmpPosForm=ref<updateEmpPos>({
  empId:eId,
  posId:1
})
const getDeptList = async () => {
  const res = await getDeptListInfo()
  DeptList.value = res.data
}
getDeptList()
const updateEmpDeptFn = async () => {
  await updateEmpDeptId(updateEmpDeptForm.value)
  
}
const updateEmpPosFn = async () => {
  await updateEmpPosId(updateEmpPosForm.value)
  
}
const submitForm1=async () => {
  try {
    await updateEmpDeptFn();
    ElMessage.success('部门调转成功'); // 调转成功后弹出提示框
  } catch (error) {
    ElMessage.error('部门调转失败'); // 调转失败后弹出错误提示
  }
}
const submitForm2=async () => {
  try {
    await updateEmpPosFn();
    ElMessage.success('职位调转成功'); // 调转成功后弹出提示框
  } catch (error) {
    ElMessage.error('职位调转失败'); // 调转失败后弹出错误提示
  }
}

const positionList = ref<Pos[]>([])
const getPositionFn = async () => {
  const res = await getPosition();
  positionList.value = res.data;
}
getPositionFn()


</script>